<template>
  <scroll-view scroll-y class="wrapper">
    <view class="inner">
      <view class="row notice u-font-sm mg_b_20">
        <view class="icon">HOT</view>
        <view class="content color-333 flex-1 eclipse-1 font-24">最新新高考资讯请关注公众号：指北针青少年学业规划</view>
      </view>
      <view class="nav_wrp row pd_t_30 pd_b_30">
        <navigator url="/pages/explore/xuanke" class="item_nav row flex-1 flex-center">
          <view class="icon"><image src="https://app.zbzedu.com/static/WaChat/img/xuanke.png" class="icon_img"></image></view>
          <view class="txt">选科要求</view>
        </navigator>
        <navigator url="/pages/explore/zhuanye"  class="item_nav row flex-1 flex-center">
          <view class="icon"><image src="https://app.zbzedu.com/static/WaChat/img/zhuanye.png" class="icon_img"></image></view>
          <view class="txt">专业百科</view>
        </navigator>
        <navigator url="/pages/explore/school"  class="item_nav row flex-1 flex-center">
          <view class="icon"><image src="https://app.zbzedu.com/static/WaChat/img/school.png" class="icon_img"></image></view>
          <view class="txt">院校一览</view>
        </navigator>
        <navigator url="/pages/explore/job"  class="item_nav row flex-1 flex-center">
          <view class="icon"><image src="https://app.zbzedu.com/static/WaChat/img/zhiye.png" class="icon_img"></image></view>
          <view class="txt">职业探索</view>
        </navigator>
      </view>
      <view class="pd_t_30" v-if="schoolList.length">
        <view class="color-333 font-b font-36 pd_b_10">名校风采</view>
        <scroll-view scroll-x class="swiper">
          <navigator :url="`/pages/explore/school_info?id=${item.id}`" class="item bg-fff" v-for="(item, index) in schoolList" :key="index">
            <view class="item_inner row-column">
              <image :src="item.imgUrl" class="school_icon"></image>
              <view class="name eclipse-2 text-cent font-24 color-333 font-28 flex-center">{{item.schoolName}}</view>
            </view>
          </navigator>
        </scroll-view>
      </view>
      <view class="pd_t_30" v-if="news.length">
        <view class="color-333 font-b font-36 pd_b_20">最新资讯</view>
        <view class="home_record record_list">
          <view class="list_wrapper">
            <view class="item_list" v-for="(item, index) in news"
                  @click="jump(item)">
              <view class="left">
                <image class="item_img" :src="item.newsCover"></image>
              </view>
              <view class="right">
                <view class="item_title eclipse-1">{{item.newsName}}</view>
                <view class="item_content">{{item.newsDesc}}</view>
                <view class="item_date u-flex flex-between">
                  <view>{{item.createTime}}</view>
                  <view>
                    <u-icon name="eye" size="28" color="#999"></u-icon>
                    <text class="u-p-l-10">{{item.lookNum}}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  import {request} from "../../util/api";

  export default {
    data() {
      return {
        news: [],
        schoolList: []
      }
    },

    onShow() {
      this.getSchool()
      this.getNews()
    },

    methods: {
      getNews() {
        request({
          url: '/system/wx/news/list',
          token: true
        }).then(res => {
          let list = res.data.filter(item => item.newsType == '探索')
          this.news = list
        })
      },

      getSchool() {
        request({
          url: '/system/wx/CompassUniversityInfo/list/1/20',
          token: true,
          platfom: 'weixin',
          data: {
            showOrNot: true
          }
        }).then(res => {
          this.schoolList = res.list
        })
      },

      jump(data) {
        setTimeout(()=> {
          uni.$emit('news_detail', {
            details: data
          })
        }, 300)
        this.$u.route({
          url: '/pages/explore/new_detail?id=' + data.id
        })
      }
    },

    onShareAppMessage(res) {}
  }
</script>

<style scoped lang="scss">
  .wrapper {
    height: 100%;
    box-sizing: border-box;
    .inner {
      width: 92.5%;
      margin: 0 auto;
      .notice {
        padding-left: 10upx;
        padding-right: 20upx;
        .icon {
          margin-right: 10upx;
          color: #EA4242;
        }
      }
      .nav_wrp {
        justify-content: space-around;
        box-shadow: -1px 1px 7px -2px rgba(0, 0, 0, 0.4);
        border-radius: 8px;
        .icon_img {
          width: 110upx;
          height: 110upx;
        }
        .item_nav {
          flex-direction: column;
          .txt {
            color: rgba(16, 16, 16, 100);
            font-size: 24upx;
          }
        }
      }
      .swiper {
        background: #f7f7f7;
        white-space: nowrap;
        padding: 10upx 5upx;
        box-sizing: border-box;
        border-radius: 8upx;
        .item {
          height: 100%;
          display: inline-block;
          padding: 10upx 10upx;
          width: 220upx;
          margin-right: 15upx;
          border-radius: 8upx;
          &:last-child {
            margin-right: 0;
          }
          .item_inner {
            height: 260upx;
          }
          .school_icon {
            width: 110upx;
            height: 110upx;
          }
          .name {
            width: 100%;
            white-space: pre-wrap;
            height: 80upx;
          }
        }
      }
      .record_list {
        .item_list {
          display: flex;
          padding-bottom: 30upx;
          margin-bottom: 30upx;
          border-bottom: 2upx solid #E5E5E5;
          .left {
            width: 200upx;
            height: 200rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .item_img {
              width: 100%;
              height: 200upx;
              border-radius: 16upx;
            }
          }
          .right {
            flex: 1;
            margin-left: 30upx;
            width: 400upx;
            .item_title {
              color: #333;
              font-size: 28upx;
            }
            .item_content {
              color: #666;
              font-size: 26upx;
              margin-top: 20upx;
            }
            .item_date {
              color: #999;
              font-size: 24upx;
              margin-top: 30upx;
            }
          }
        }
      }
    }
  }
</style>
